﻿@model thailandProject.ViewModel.ApartmentReservationModel

@{

   ViewBag.Title = "View Apartment Reservations";

}

<div id="Wrapper2">

   <div id="content_header">

       <div id="headerimage">

       </div>

       <div id="theheader">@ViewBag.Header</div>

   </div>

   <!-- Left Column begins here -->

   <aside id="sidebar-wrapper">

       <nav class="sidebar">

           <!-- CONTENT GOES HERE -->

               

           @if (Model != null)

           {

               using (Html.BeginForm("ViewApartmentReservations", "Reporting", FormMethod.Post, new { id = "searchForm" }))
               {
                   <input name="sortType" id="sort_type" type="hidden" value="@ViewBag.sortType" />
                   <input name="ascen" id="toggle_sort" type="hidden" value="@ViewBag.ascen" />
                   
                   <div id="filterBoxes" style="width:100%; margin-top:10px;">
                       
                           <div class="search_box1"> Property Name: <br />@Html.DropDownListFor(x => x.prop.selectedProp, Model.prop.properties) </div>
                           
                           <div class="check_box2"> <img id="showAll" width="25px" src="" /><input type="hidden" style="float:left" name="showAll" value="@ViewBag.checkbox"/><div style="display:inline; margin:0px 0px 5px 5px; height:100%;">Check to view all</div></div>
                       

                   </div>

                   <div id="searchDates" style="width:100%; margin-top:10px;">

                           <div class="search_box1"> From: <br /><input style="width:85%" type="text" class="datepickerGeneral" id="dateFrom" name="dateFrom" value="@ViewBag.from.ToShortDateString()" readonly="true" /></div>

                           <div class="search_box2"> To: <br /><input style="width:85%" type="text" class="datepickerGeneral" id="dateTo" name="dateTo" value="@ViewBag.to.ToShortDateString()" readonly="true" /></div>

                           <div class="search_button"><input id="searchButton" style="float:left;" type="image" alt="search" src="../../images/searchicon.png" /></div>

                           <div id="dateErrorMessage" style="color:red; visibility:hidden;">Please enter a "To" and "From" date.</div>

                   </div>

               }
               <div style="margin:15px 0px 0px 0px">
               <a id="printReport" href="javascript:void(0)"><div style="display:inline; float:left; margin:3px 5px 0px 10px; color:#cc7777;">View as </div><div style="display:inline;"><img src="../../images/pdf_icon.png" /></div></a>
               </div>
               <div id="mobileReport">
               @foreach (var r in Model.report)
               {
                   <div id="reportingHeader" onclick=" $(this).next(reportingBody).slideToggle('fast'); ">
                        <span id="propNameLabel" >@Html.DisplayFor(modelItem => r.propName)</span>

                        @Html.DisplayFor(modelItem => r.clientFirstName)
                        @Html.DisplayFor(modelItem => r.clientLastName)
                        <span id="mobileHeaderDate">@r.startDate.ToString("M/d")</span>
                   
                   </div>
               
                    <div name="reportingBody" id="reportingBody" style="display:none"`>
                        @r.startDate.ToString("MMM dd, yyyy") 
                        @Html.Label("-")
                        @r.endDate.ToString("MMM dd, yyyy")<br />
                        @Html.Label("Quoted Price: ")
                        @Html.DisplayFor(modelItem => r.quotedPrice)<br />
                        @Html.Label("Paid: ") 
                        @Html.DisplayFor(modelItem => r.paid)
                       
                    </div>
                    <br />
                   
               }
               </div>

               <div id="desktopReport">
               

               <table>

                      <tr id="sortlinks">

                          <th><a href="javascript:void(0)">Property Name</a></th>

                          <th><a href="javascript:void(0)">First Name</a></th>

                          <th><a href="javascript:void(0)">Last Name</a></th>

                          <th><a href="javascript:void(0)">Start Date</a></th>

                          <th><a href="javascript:void(0)">End Date</a></th>

                          <th><a href="javascript:void(0)">Quoted Price</a></th>

                          <th><a href="javascript:void(0)">Paid</a></th>

                      </tr>

                   
                   
    
               @foreach (var r in Model.report)
               {    

                   <tr>
                      
                       <td>@Html.DisplayFor(modelItem => r.propName)</td>  

                       <td>@Html.DisplayFor(modelItem => r.clientFirstName)</td>

                       <td>@Html.DisplayFor(modelItem => r.clientLastName)</td>

                       <td>@r.startDate.ToString("MMM dd, yyyy")</td>

                       <td>@r.endDate.ToString("MMM dd, yyyy")</td>

                       <td>@Html.DisplayFor(modelItem => r.quotedPrice)</td>

                       <td>@Html.DisplayFor(modelItem => r.paid)</td>
                      

                   </tr>

               }

               </table>
               </div>

           }

           else
           {

               <p>No Data Found!</p>

           }









       </nav>

       <!-- Left column ends here -->

   </aside>

   <!-- Right column begins here -->

   <article id="contents">

       

   </article>

   <!-- Right column ends here -->

</div>

<!-- Div wrapper2 ends here -->



<script>
    $(document).ready(function () {
        if ($("#showAll").next().attr('value') == 'false' || $("#showAll").next().attr('value') == 'False' || $("#showAll").next().attr('value') == '') {
            $("#showAll").attr('src', '../../images/unchecked.png');
        }
        else {
            $("#showAll").attr('src', '../../images/checked.png');
        }

        $("#showAll").click(function () {
            if ($(this).next().attr('value') == 'false')
            {

                $(this).attr('src', '../../images/checked.png');
                $(this).next().attr('value', 'true');
            }
            else
            {
                $(this).attr('src', '../../images/unchecked.png');
                $(this).next().attr('value', 'false');
            }
        });


        $("#sortlinks").children().children().click(function () {
            var sortType = $("#sort_type").attr('value');

            if ($(this).html() == "Property Name") {
                $("#sort_type").attr('value', 'propName');
            }
            else if ($(this).html() == "First Name") {
                $("#sort_type").attr('value', 'clientFirstName');
            }
            else if ($(this).html() == "Last Name") {
                $("#sort_type").attr('value', 'clientLastName');
            }
            else if ($(this).html() == "Start Date") {
                $("#sort_type").attr('value', 'startDate');
            }
            else if ($(this).html() == "End Date") {
                $("#sort_type").attr('value', 'endDate');
            }
            else if ($(this).html() == "Quoted Price") {
                $("#sort_type").attr('value', 'quotedPrice');
            }
            else if ($(this).html() == "Paid") {
                $("#sort_type").attr('value', 'paid');
            }

            //The toggle sort function has currently been disabled.  With the current logic, the list switch between
            // ascending and descending EVERY TIME a column is selected.  The toggle needs to work independently with each column.
            //For example, the page is sorted ascending by default.  No matter what column you choose to sort by the next time, 
            //all data will switch to descending order.  The decision was made that Richard would probably never think about
            //sorting by decending anyway.  I have only commented the toggle out, however, in case it needs to be reactivated
            //at a later time.

//                if ($("#toggle_sort").attr('value') == 'True') {
//                    $("#toggle_sort").attr('value', 'false');
//                }
//                else {
//                    $("#toggle_sort").attr('value', 'true');
//                }
            

            $("#searchForm").submit();

        });

        $("#printReport").click(function () {
            $("#searchForm").attr("action", "/Reporting/printPDF");
            $("#searchForm").submit();
            $("#searchForm").attr("action", "/Reporting/ViewApartmentReservations");
        });
    });
</script>